<template>
  <div class="w-h-full" :style="{boxShadow: boxShadow}">
    <div class="border-comp"
         :style="{
           borderImage: buildBorderImageStyle,
           opacity: component.compConfigData.opacity
         }"></div>
    <!--<img :src="require('./images/' + component.compConfigData.borderImage)" class="w-h-full"
         :style="{
           opacity: component.compConfigData.opacity
         }"
         :onerror="defaultImg" crossorigin="anonymous"/>-->
  </div>
</template>

<script>
  import FuncCompMixin from '@/mixin/FuncCompMixin'

  const _this = {
    name: 'BorderComp',
    mixins: [FuncCompMixin],
    attr: {
      version: '1.3',
      configDataTemp: {
        borderImage: 'border-1.png',
        borderImageStyle: '32 37 / 32px 37px / 0 stretch',
        opacity: 1,

        shadow_show: false,
        shadow_inset: false,
        shadow_color: '#fff',
        shadow_blurRadius: 10,
        shadow_h_offset: 0,
        shadow_v_offset: 0
      }
    },
    data() {
      return {}
    },
    mounted() {

    },
    methods: {},
    computed: {
      buildBorderImageStyle () {
        return "url("+require('./images/'+this.component.compConfigData.borderImage)+") " + this.component.compConfigData.borderImageStyle
      },
      boxShadow () {
        if (this.component.compConfigData.shadow_show) {
          let style = '';

          style = this.component.compConfigData.shadow_h_offset + 'px ' +
            this.component.compConfigData.shadow_v_offset + 'px ' +
            this.component.compConfigData.shadow_blurRadius + 'px ' + this.component.compConfigData.shadow_color;

          if (this.component.compConfigData.shadow_inset) {
            style = 'inset ' + style
          }

          return style
        }

        return 'none'
      }
    }
  };

  export default _this
</script>

<style scoped>
  .border-comp {
    width: 100%;
    height: 100%;
    border-style: solid;
  }
</style>
